import { forwardRef, useEffect, useRef } from "react";

const MyInput = forwardRef(function MyInput(props, ref) {
  const { label, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} ref={ref} />
    </label>
  );
});

const MyParentRef = ({ ref }) => {
useEffect(() => {
    console.log(ref);
}, [ref]);
  return <div>my parent ref is {ref?.current?.localName}</div>;
};

// 父组件
function RefsComp() {
  const inputRef = useRef(null);
  const formRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div ref={formRef}>
      <form>
        <MyInput label="Enter your name:" ref={inputRef} />
        <button type="button" onClick={handleClick}>
          编辑
        </button>
        <MyParentRef ref={formRef} />
      </form>
    </div>
  );
}

export default RefsComp;